<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close" :close-on-click-modal="false">
    <el-form ref="form" label-width="130px" :model="form" :rules="rules">
      <el-form-item label="费用号/项目名称" prop="projectId">
        <el-select v-model="form.projectId" placeholder="请选择" filterable>
          <el-option v-for="item in projectGroup" :key="item.id" :label="item.projectName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单内容" prop="workContent">
        <el-input type="textarea" v-model="form.workContent" rows="4"></el-input>
      </el-form-item>
      <el-form-item label="客户需求" prop="isCustomerDemand">
        <el-radio v-model="form.isCustomerDemand" :label="1">是</el-radio>
        <el-radio v-model="form.isCustomerDemand" :label="2">否</el-radio>
      </el-form-item>
      <el-form-item label="工单下单时间" prop="workOrderIssuanceTime">
        <el-date-picker v-model="form.workOrderIssuanceTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="执行人" prop="executUserId">
        <el-select v-model="form.executUserId" placeholder="请选择" filterable :filter-method="pinyingMatch">
          <el-option v-for="item in userGroup" :key="item.id" :label="item.realname" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门" prop="departmentId">
        <el-select v-model="form.departmentId" placeholder="请选择">
          <el-option v-for="item in departmentGroup" :key="item.id" :label="item.departmentName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="完成情况" prop="completionStatus">
        <el-select v-model="form.completionStatus" placeholder="请选择完成情况">
          <el-option label="未完成" :value="1"></el-option>
          <el-option label="已完成" :value="2"></el-option>
          <el-option label="取消" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="完成时间" prop="completionTime" v-if="form.completionStatus == 2">
        <el-date-picker v-model="form.completionTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="工单等级" prop="workLevelId">
        <el-select v-model="form.workLevelId" placeholder="请选择">
          <el-option v-for="item in workOrderLevelGroup" :key="item.id" :label="item.levelName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="未关闭原因" prop="notClosingReason">
        <el-input type="textarea" v-model="form.notClosingReason" rows="6"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    insertWorkOrderList,
    updateWorkOrder,
    getUserGroup,
    getDepartmentList,
    getProjectGroup,
    getWorkOrderLevelList,
  } from '@/api/wordOrder'
  import PinyinMatch from 'pinyin-match'

  export default {
    name: 'WordOrderEdit',
    data() {
      return {
        timer: null,
        projectGroup: [],
        userGroup: [],
        copyUserGroup: [],
        departmentGroup: [],
        workOrderLevelGroup: [],
        form: {
          id: '',
          projectId: '',
          workContent: '',
          isCustomerDemand: 2,
          workOrderIssuanceTime: '',
          executUserId: '',
          departmentId: '',
          completionStatus: 1,
          completionTime: '',
          workLevelId: '',
          notClosingReason: '',
        },
        rules: {
          projectId: [{ required: true, trigger: 'change', message: '请选择费用号/项目名称' }],
          workContent: [{ required: true, trigger: 'blur', message: '请输入工单内容' }],
          workOrderIssuanceTime: [{ required: true, trigger: 'change', message: '请选择工单下单时间' }],
          executUserId: [{ required: true, trigger: 'change', message: '请选选择执行人' }],
          departmentId: [{ required: true, trigger: 'change', message: '请选选择部门' }],
          completionStatus: [{ required: true, trigger: 'change', message: '请选择完成情况' }],
          completionTime: [{ required: true, trigger: 'change', message: '请选择完成时间' }],
          workLevelId: [{ required: true, trigger: 'change', message: '请选择工单等级' }],
          // notClosingReason: [{ required: true, trigger: 'blur', message: '请输入未关闭原因' }],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.init()
    },
    watch: {
      'form.completionStatus'(newValue, oldValue) {
        this.form.completionTime = ''
      },
    },
    methods: {
      init() {
        this.fetchUserData()
        this.fetchProjectData()
        this.fetchWorkOrderLevelData()
        this.fetchDepartmentData()
      },
      async fetchUserData() {
        const { data } = await getUserGroup()
        this.userGroup = data
        this.copyUserGroup = Object.assign(this.userGroup)
      },
      async fetchDepartmentData() {
        const { data } = await getDepartmentList()
        this.departmentGroup = data
      },
      async fetchProjectData() {
        const { data } = await getProjectGroup()
        this.projectGroup = data
      },
      async fetchWorkOrderLevelData() {
        const { data } = await getWorkOrderLevelList()
        this.workOrderLevelGroup = data
      },
      pinyingMatch(val) {
        // 对绑定数据赋值
        if (val) {
          this.userGroup = this.copyUserGroup.filter((item) => {
            // 如果直接包含输入值直接返回true
            if (item.realname) {
              if (item.realname.toUpperCase().indexOf(val.toUpperCase()) != -1) {
                return true
              }
              // 输入值拼音d
              return PinyinMatch.match(item.realname, val)
            }
          })
        } else {
          this.userGroup = this.copyUserGroup
        }
      },
      showEdit(row) {
        if (!row) {
          this.title = '新建工单'
        } else {
          this.title = '编辑工单'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
        this.$emit('fetchData')
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.id) {
              await updateWorkOrder(this.form)
            } else {
              await insertWorkOrderList(this.form)
            }
            this.$baseMessage('提交成功', 'success')
            this.$refs['form'].resetFields()
            this.dialogFormVisible = false
            this.$emit('fetchData')
            this.form = this.$options.data().form
          } else {
            return false
          }
        })
      },
    },
  }
</script>
